<template>
  <div>
  <todo-list :todos="todos">
    <template slot-scope="slotProps">
      <span v-if="slotProps.todo.isComplete">✓</span>
      <span>{{slotProps.todo.text}}</span>
    </template>
  </todo-list>

    <el-button
      size="mini"
      type="primary"

      @click="handleUpdate"
    >弹窗
    </el-button>

  <prompt
    :visible.sync="promptWin.visible"
    :placeholder="promptWin.placeholder"
    :title="promptWin.title"
    @on-ok="promptConfirmCallback"
    @on-cancel="promptCancelCallback"
  >

  </prompt>

  </div>
</template>

<script>
  import todoList from './todoList'
  import prompt from '../views/components/prompt'

  export default {
    data () {
      return {
        todos: [
          {
            id: 0,
            text: '手机',
            isComplete: false
          },
          {
            text: '电脑',
            id: 1,
            isComplete: true
          },
          {
            text: '服装',
            id: 2,
            isComplete: false
          },
          {
            text: '点心',
            id: 3,
            isComplete: false
          }
        ],
        promptWin : {
          visible : false ,
          title : 'dewfef'
        }

      }
    },

    methods: {
      handleUpdate (){
        this.promptWin.visible = true;
      },

      /* prompt组件   开始     */
      promptConfirmCallback (remark){
        alert('拿到子组件的文本值' + remark);
      },

      promptCancelCallback (){
        this.prompt.visible = false;
      }

      /* prompt组件   结束     */
    },

    components: {
      todoList,prompt
    },

  }
</script>

<style scoped>

</style>
